<!--
	地震信息
	Created by Penglei on 2023/08/17
-->
<template>
	<div class="earthquake-information">
		<div class="connect-line"></div>
		<!-- 无缝衔接滚动 -->
		<vue3-seamless-scroll :hover="true" :hover-stop="true" :list="list" :step="0.2" class="information">
			<div class="title">地震信息</div>
			<!-- 时间轴 -->
			<el-timeline>
				<el-timeline-item v-for="(item, index) in list" :key="index" :hollow="true"
					:timestamp="parseTime(item.time, '{y}-{m}-{d} {h}:{i}:{s}')" placement="top">
					<div>{{ item.province && item.province.indexOf('市') == -1 ? item.province : '' }}{{ item.city }}{{
						item.county }}</div>
					<div>震级：{{ item.magnitude }}
						<span class="latitude-longitude">经纬度：({{ item.lon }},{{ item.lat }})</span>
						深度：{{ item.depth }}KM
					</div>
				</el-timeline-item>
			</el-timeline>
		</vue3-seamless-scroll>
	</div>
</template>

<script setup name="EarthquakeInformation">
import { ref } from 'vue';
// 公用方法
import { parseTime } from '@/utils/ruoyi'
// 引入接口
import { getEarthquakeInformationApi } from '@/api/basicData'
// 数据列表
const list = ref([
	{
		time: '2017-03-06  08:52:29',
		province: '新疆',
		city: '克孜勒苏柯尔克孜自治州',
		county: '',
		magnitude: '4.0',
		lon: '40.27',
		lat: '77.20',
		depth: '18',
	},
	{
		time: '2017-03-06  10:15:47',
		province: '新疆',
		city: '克孜勒苏柯尔克孜自治州',
		county: '',
		magnitude: '4.0',
		lon: '40.27',
		lat: '77.20',
		depth: '18',
	},
	{
		time: '2017-03-06  10:15:47',
		province: '新疆',
		city: '克孜勒苏柯尔克孜自治州',
		county: '',
		magnitude: '4.0',
		lon: '40.27',
		lat: '77.20',
		depth: '18',
	},
]);

// 加载数据
const getData = () => {
	list.value.length = 0;
	getEarthquakeInformationApi().then(res => {
		const { code, data } = res;
		if (code == 200 && data) {
			list.value = [...data];
		}
	}).catch(err => {
		console.log(err.message);
	})
}
// 挂载完成
onMounted(() => {
	// 加载数据
	getData();
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

$normalColor: #46FFFF;

.earthquake-information {
	width: 370px;
	height: 320px;
	background: url('@/assets/images/basicData/bg-historical.png') no-repeat center;
	background-size: 100% 100%;
	padding: 25px 15px 25px 30px;
	color: $white;
	position: absolute;
	left: 339px;
	bottom: 37px;
	z-index: 10000;

	// 连接线
	.connect-line {
		position: absolute;
		top: 80px;
		right: 100%;
		width: 83px;
		height: 3px;
		background: linear-gradient(90deg, #035CFF 0%, #00E2FF 100%);
	}

	// 地震信息
	.information {
		position: relative;
		height: 270px;
		overflow: auto;

		.title {
			font-size: 16px;
			font-weight: bold;
			color: $normalColor;
			line-height: 32px;
		}

		// 时间轴
		:deep(.el-timeline) {
			padding: 0;
			padding-left: 5px;

			.el-timeline-item {
				&__timestamp {
					display: inline-block;
					width: auto;
					height: 20px;
					padding: 3px 5px;
					font-size: 12px;
					color: #010024;
					background: linear-gradient(134deg, #7DE7FF 0%, #00CFFF 50%, #7DE7FF 100%);
				}

				&__tail {
					width: 2px;
					border-color: $normalColor;
				}

				&__node {
					width: 10px;
					height: 10px;
					background: #000F5A;
					box-shadow: 0px 0px 5px 1px $normalColor;
					opacity: 1;
					border: 1px solid $normalColor;
				}

				&__wrapper {
					padding-left: 20px;
				}

				&__content {
					font-size: 12px;
					color: $white;
					line-height: 16px;

					.latitude-longitude {
						margin: 0 10px;
					}
				}
			}
		}
	}
}
</style>